<script setup>
import { onMounted } from 'vue';
import { useActionMianStore } from '../../store/action/actionMainStore';
import { useActionOrderStore } from '../../store/action/actionOrderStore';
import router from '../../router';
const actionOrderStore = useActionOrderStore();
// 引入store
const actionMainStore = useActionMianStore();
// 格式化日期显示
const formatDate = (dateString) => {
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
// 获取展览状态标签样式
const getStatusClass = (exhibition) => {
    const now = new Date();
    const startDate = new Date(exhibition.startTime);
    const endDate = new Date(exhibition.endTime);

    if (now < startDate) return 'status-upcoming';
    if (now > endDate) return 'status-ended';
    return 'status-active';
};

// 获取展览状态文本
const getStatusText = (exhibition) => {
    const now = new Date();
    const startDate = new Date(exhibition.startTime);
    const endDate = new Date(exhibition.endTime);

    if (now < startDate) return '即将开始';
    if (now > endDate) return '已结束';
    return '展出中';
};

// 处理页码变化
const handleCurrentChange = () => {
    
};

// 处理每页条数变化
const handleSizeChange = () => {
    
};
//放票管理
function editOrder(id){
    console.log('放票管理',id);
    //实现跳转到编辑页或打开编辑弹窗
    actionOrderStore.setActionId(id);
    actionOrderStore.loadCurrentActiion();
    actionOrderStore.setActionName(actionMainStore.getAction(id).actionName);
    actionOrderStore.setActionDate(actionMainStore.getAction(id).actionDate);
    actionOrderStore.setIsOpen(true);
}
//订单管理
function orderManagement(id){
    console.log('订单管理',id);
    router.push(`/action/actionMangemnet/${id}`);
}
onMounted(async() => { 
    actionMainStore.getAllList();
});
</script>
<template>
    <el-card style="max-height: 800px;overflow-y: auto; " v-loading="actionMainStore.loading">
        <div class="action-main">
            <div class="action-card" v-for="item in actionMainStore.actionMainList" :key="item.id">
                <div class="action-cover">
                    <img :src="item.actionCover" :alt="item.actionName">
                    <div class="action-status" :class="getStatusClass(item)">
                        {{ getStatusText(item) }}
                    </div>
                </div>
                <div class="action-info">
                    <h3 class="action-name">{{ item.actionName }}</h3>
                    <div class="action-meta">
                        <div class="meta-item">
                            <i class="el-icon-collection-tag"></i>
                            <span>{{ item.actionType }}</span>
                        </div>
                        <div class="meta-item">
                            <i class="el-icon-date"></i>
                            <span>{{ formatDate(item.actionDate) }}</span>
                        </div>
                        <div class="meta-item">
                            <i class="el-icon-location"></i>
                            <span>{{ item.acctionLocation }}</span>
                        </div>
                    </div>
                </div>
                <div class="action-actions">
                    <button class="btn-view" @click="viewDetails(item.id)">
                        <i class="el-icon-view"></i> 查看详情
                    </button>
                    <button class="btn-edit" @click="editExhibition(item.id)">
                        <i class="el-icon-edit"></i> 修改
                    </button>
                    <button class="btn-order" @click="editOrder(item.id)">
                        <i class="el-icon-edit"></i> 放票
                    </button>
                    <button class="btn-managemnet" @click="orderManagement(item.id)">
                        <i class="el-icon-edit"></i> 订单管理
                    </button>
                </div>
            </div>
        </div>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="actionMainStore.pageNum" v-model:page-size="actionMainStore.pageSize"
                :pager-count="5" :page-sizes="[6, 12, 18, 24]" layout="total, sizes, prev, pager, next, jumper"
                :total="actionMainStore.total" @update:page-size="handleSizeChange"
                @update:current-page="handleCurrentChange" />
        </div>
        <div class="empty-state" v-if="actionMainStore.actionMainList.length === 0">
            <div class="empty-state-content">暂无数据</div>
        </div>
    </el-card>
</template>
<style scoped>
.action-main {
    margin: 0 auto;
    width: 90%;
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.action-card {
    width: calc((100% - 4rem) / 3);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.action-cover {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.action-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.action-card:hover .action-cover img {
    transform: scale(1.05);
}

.action-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.status-active {
    background-color: #67C23A;
}

.status-upcoming {
    background-color: #409EFF;
}

.status-ended {
    background-color: #909399;
}

.action-info {
    padding: 16px;
    flex-grow: 1;
}

.action-name {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: bold;
    color: #303133;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
}

.meta-item i {
    margin-right: 6px;
    font-size: 16px;
}

.action-actions {
    display: flex;
    padding: 6px 16px 16px;
    gap: 10px;
}

.action-actions button {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.action-actions button i {
    margin-right: 4px;
}

.btn-order {
    background-color: rgb(237.5, 189.9, 118.5);
    color: #F56C6C;
}

.btn-order:hover {
    background-color: rgb(242.5, 208.5, 157.5)
}

.btn-view {
    background-color: #ecf5ff;
    color: #409EFF;
}

.btn-view:hover {
    background-color: #d9ecff;
}

.btn-edit {
    background-color: #f0f9eb;
    color: #67C23A;
}

.btn-edit:hover {
    background-color: #e1f3d8;
}

.btn-managemnet {
    background-color: rgb(177.3, 179.4, 183.6);
    color: white
}

.btn-managemnet:hover {
    background-color: #909399;
}

/* 分页样式 */
.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 1rem;
    margin-right: 5%;
    margin-bottom: 2rem;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
    .action-card {
        width: calc((100% - 2rem) / 2);
    }
}

@media screen and (max-width: 768px) {
    .action-card {
        width: 100%;
    }

    .demo-pagination-block {
        justify-content: center;
        margin-right: 0;
    }

    :deep(.el-pagination .el-pagination__sizes) {
        display: none;
    }

    .demo-pagination-block :deep(.el-pagination .el-pagination__jump) {
        display: none;
    }

    .el-pagination {
        flex-wrap: wrap;
        font-size: 12px;
        width: 100%;
        justify-content: center;
    }
}
</style>